<template>
	<view class="topNav">
		<view class="head-wrapper" :style="'top:'+statusBarHeight">
			<view class="headItem">
				<image  @click="back" src="/static/icons/back_logo.png" mode=""></image>
			</view>
			<view class="head_text headItem">{{topName}}</view>
			<view class="headItem"></view>
		</view>
		<view class="top_bj">
			<image :style="[{ height: bjHeight}]" src="/static/index/top-bg@2x.png" mode="" v-if="bjFlag"></image>
			<view class="bj_box" :style="[{ height: bjHeight},{background:bjColor}]" v-else></view>
		</view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default{
		props: {
		    topName: {
		        type: String,
		        default:""
		    },
			bjHeight:{
				type:String,
				default:""
			},
			bjFlag:{
				type:Boolean,
				default:true
			},
			bjColor:{
				type:String,
				default:""
			}
		},
		data(){
			return{
				statusBarHeight: statusBarHeight, //系统导航条高度
			}
		},
		onLoad(){
			
		},
		methods:{
			// 返回上一页
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
		
	}
</script>

<style lang="less" scoped>
.topNav{
	position: fixed;
	top: 0;
	z-index: 99;
	.head-wrapper {
		z-index: 999;
		// display: flex;
		// align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		align-items: center;
		/* #ifdef MP */
		// height: 43px;
		/* #endif */
		/* #ifdef H5 */
		height: 114rpx;
		/* #endif */
		.headItem{
			width: calc(100% / 3);
		}
		image{
			width: 44rpx;
			height: 44rpx;
			display: block;
			margin-left: 32rpx;
			// position: absolute;
			// top: 50%;
			// left: 32rpx;
			// transform: translateY(-50%);
		}
		.head_text{
			// width: 100%;
			text-align: center;
			color: #FFFFFF;
			font-size: 36rpx;
		}
		.head_gl{
			font-size: 28rpx;
			// font-family: .PingFang SC;
			font-weight: 300;
			line-height: 0rpx;
			color: #FFFFFF;
			opacity: 1;
			position: absolute;
			right: 38rpx;
		}
	}
	
	.top_bj{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		.bj_box{
			width: 100%;
			height: 130rpx;
			background: linear-gradient(180deg, #3DBB46 0%, #6ED876 100%);
		}
		image{
			width: 100%;
			height: 130rpx;
		}
	}
}
</style>
